import { dayjs } from 'element-plus';
import {
  DATE_CUTS,
  INIT_SEARCH_TIME,
  GET_USER_IDS,
  TOKEN_STATUS_LIST,
  USE_STATUS_LIST,
  FORMAT_DATE
} from '@/utils/const';
import userStore from '@/store/modules/user';

// 注入组件内数据
const componentData = ref({});
export const injectData = obj => {
  componentData.value = { ...componentData.value, ...obj };
};

// 查询表单
export const searchParams = reactive({});

watch(
  () => searchParams.applyRange,
  val => {
    INIT_SEARCH_TIME(searchParams, val, 'begin_at', 'end_at');
  },
  { immediate: true }
);

// 查询条件
const startApplyTime = ref(undefined);
export const formItems = reactive({
  fb_email: {
    component: 'input',
    label: '个号邮箱',
    placeholder: '请输入个号邮箱',
    maxlength: 100
  },
  fb_account_type: {
    component: 'select',
    filterable: true,
    label: '个号类型',
    clearable: false,
    options: [{ label: '全部', value: undefined }]
  },
  user_name: {
    component: 'input',
    label: '使用人员',
    placeholder: '请输入使用人员',
    maxlength: 100,
    showOnly: true,
    input() {
      searchParams.user_ids = GET_USER_IDS(searchParams.user_name);
    }
  },
  token_enable: {
    component: 'select',
    filterable: true,
    label: 'Token状态',
    clearable: false,
    options: [{ label: '全部', value: undefined }, ...TOKEN_STATUS_LIST]
  },
  use_status: {
    component: 'select',
    filterable: true,
    label: '使用状态',
    clearable: false,
    options: [{ label: '全部', value: undefined }, ...USE_STATUS_LIST]
  },
  applyRange: {
    component: 'date-picker',
    type: 'daterange',
    label: '创建时间',
    clearable: false,
    showOnly: true,
    shortcuts: [
      { text: '最近7天', value: () => DATE_CUTS.LAST_7_DAYS() },
      { text: '本周', value: () => DATE_CUTS.THIS_WEEK() },
      { text: '本月', value: () => DATE_CUTS.THIS_MONTH() },
      { text: '上周', value: () => DATE_CUTS.PREV_WEEK() },
      { text: '上月', value: () => DATE_CUTS.PREV_MONTH() },
      { text: '最近31天', value: () => DATE_CUTS.LAST_31_DAYS() },
      { text: '最近180天', value: () => DATE_CUTS.LAST_180_DAYS() }
    ],
    disabledDate(ev) {
      if (!startApplyTime.value) return false;
      return (
        dayjs(ev).isAfter(dayjs(startApplyTime.value).add(179, 'day')) ||
        dayjs(ev).isBefore(dayjs(startApplyTime.value).subtract(179, 'day'))
      );
    },
    calendarChange(ev) {
      if (ev?.length && ev[0] && !ev[1]) startApplyTime.value = ev[0];
      else startApplyTime.value = undefined;
    }
  }
});

// 表格字段
export const columns = ref([
  { prop: 'fb_email', label: '个号邮箱' },
  { prop: 'type.name', label: '个号类型' },
  { prop: 'group.name', label: '所属团队' },
  {
    prop: 'user_id',
    label: '使用人员',
    format(data) {
      return userStore().userMap[data]?.label;
    }
  },
  { prop: 'token_enable', slot: 'token_enable', label: 'Token状态' },
  {
    prop: 'use_status',
    label: '使用状态',
    format(data) {
      return USE_STATUS_LIST.find(item => item.value === data)?.label;
    }
  },
  { prop: 'ad_ability', label: '广告功能' },
  {
    prop: 'created_at',
    label: '创建时间',
    format(data) {
      return FORMAT_DATE(data);
    }
  },
  {
    label: '操作',
    width: '220px',
    fixed: 'right',
    buttons: [
      {
        label: '领取',
        loading({ row }) {
          return row.receiveLoading ? true : false;
        },
        hidden: ({ row }) => !hasReceive(row),
        click: ({ row }) => componentData.value.receive(row)
      },
      {
        label: '登录',
        loading({ row }) {
          return row.loginLoading ? true : false;
        },
        hidden: ({ row }) => !hasLogin(row),
        click: ({ row }) => componentData.value.login(row)
      },
      {
        label: '详情',
        hidden: ({ row }) => !hasDetail(row),
        click: ({ row }) => componentData.value.openDetail(row)
      },
      {
        isDropdown: true,
        label: '更多操作',
        buttons: [
          {
            label: '二步验证',
            hidden: ({ row }) => !hasValid(row),
            click: ({ row }) => componentData.value.openValid(row)
          },
          {
            label: '查看邮箱',
            hidden: ({ row }) => !hasEmail(row),
            click: ({ row }) => componentData.value.openEmail(row)
          },
          {
            label: '更新Token',
            hidden: ({ row }) => !hasToken(row),
            click: ({ row }) => componentData.value.openToken(row)
          },
          {
            label: '弃用',
            dropitemProps: { divided: true },
            type: 'danger',
            hidden: ({ row }) => !hasGiveup(row),
            click: ({ row }) => componentData.value.giveUp(row)
          }
        ]
      }
    ]
  }
]);

// 是否有登录操作按钮
export function hasLogin(row) {
  // 1、常规个号 && 【使用中】状态 && 登录用户为使用人员
  // 2、护照个号 && 【使用中】状态 && 登录用户为使用人员
  // 3、申诉个号 && 【使用中】状态 && 登录用户为使用人员
  const type = row.type?.id;
  const isUsing = row.use_status === 1;
  const isMy = row.user_id === userStore().userId;

  const flag1 = type === 1 && isUsing && isMy;
  const flag2 = type === 2 && isUsing && isMy;
  const flag3 = type === 3 && isUsing && isMy;
  return flag1 || flag2 || flag3;
}

// 是否有详情操作按钮
export function hasDetail(row) {
  // 1、常规个号 && 【使用中】状态 && 登录用户为使用人员
  // 2、护照个号 && 【使用中】状态 && 登录用户为使用人员
  // 3、申诉个号 && 【使用中】状态 && 登录用户为使用人员
  const type = row.type?.id;
  const isUsing = row.use_status === 1;
  const isMy = row.user_id === userStore().userId;

  const flag1 = type === 1 && isUsing && isMy;
  const flag2 = type === 2 && isUsing && isMy;
  const flag3 = type === 3 && isUsing && isMy;
  return flag1 || flag2 || flag3;
}

// 是否有领取操作按钮
export function hasReceive(row) {
  // 1、常规个号 && 【待使用】状态 && 无使用人员
  // 2、护照个号 && 【待使用】状态 && 无使用人员
  // 3、申诉个号 && 【待使用】状态 && 无使用人员
  const type = row.type?.id;
  const isNotUse = row.use_status === 0;
  const isNoUser = !row.user_id;

  const flag1 = type === 1 && isNotUse && isNoUser;
  const flag2 = type === 2 && isNotUse && isNoUser;
  const flag3 = type === 3 && isNotUse && isNoUser;
  return flag1 || flag2 || flag3;
}

// 是否有二步验证操作按钮
export function hasValid(row) {
  // 1、常规个号 && 【使用中】状态 && 登录用户为使用人员
  // 2、护照个号 && 【使用中】状态 && 登录用户为使用人员
  const type = row.type?.id;
  const isUsing = row.use_status === 1;
  const isMy = row.user_id === userStore().userId;

  const flag1 = type === 1 && isUsing && isMy;
  const flag2 = type === 2 && isUsing && isMy;
  return flag1 || flag2;
}

// 是否有查看邮箱操作按钮
export function hasEmail(row) {
  // 1、常规个号 && 【使用中】状态 && 登录用户为使用人员
  // 2、护照个号 && 【使用中】状态 && 登录用户为使用人员
  const type = row.type?.id;
  const isUsing = row.use_status === 1;
  const isMy = row.user_id === userStore().userId;

  const flag1 = type === 1 && isUsing && isMy;
  const flag2 = type === 2 && isUsing && isMy;
  return flag1 || flag2;
}

// 是否有更新Token操作按钮
export function hasToken(row) {
  // 1、常规个号 && 【使用中】状态 && 登录用户为使用人员
  // 2、护照个号 && 【使用中】状态 && 登录用户为使用人员
  // 3、申诉个号 && 【使用中】状态 && 登录用户为使用人员
  const type = row.type?.id;
  const isUsing = row.use_status === 1;
  const isMy = row.user_id === userStore().userId;

  const flag1 = type === 1 && isUsing && isMy;
  const flag2 = type === 2 && isUsing && isMy;
  const flag3 = type === 3 && isUsing && isMy;
  return flag1 || flag2 || flag3;
}

// 是否有弃用操作按钮
export function hasGiveup(row) {
  // 1、常规个号 && 【使用中】状态 && 登录用户为使用人员
  // 2、护照个号 && 【使用中】状态 && 登录用户为使用人员
  // 3、申诉个号 && 【使用中】状态 && 登录用户为使用人员
  const type = row.type?.id;
  const isUsing = row.use_status === 1;
  const isMy = row.user_id === userStore().userId;

  const flag1 = type === 1 && isUsing && isMy;
  const flag2 = type === 2 && isUsing && isMy;
  const flag3 = type === 3 && isUsing && isMy;
  return flag1 || flag2 || flag3;
}
